import { defineStore } from 'pinia';
import { onMounted, ref, shallowRef } from 'vue';
import { getCategory, getProducts } from '@/api/store';

type Toward = 'back' | 'left' | 'right' | 'positive';
export interface TowardPosition {
  type: Toward;
  markedArea: string;
  size: string;
  img: string;
  name: string;
  AICanvas: any;
}

export const useDesignerGoodState = defineStore({
  id: 'designerGood',
  state: () => ({
    categoryGoods: undefined,
    activeCategory: undefined,
    activeGood: undefined,
    // 颜色选择
    activePosition: {},
    toward: undefined as Toward,
    // 朝向 编辑区域
    towardPosition: {} as TowardPosition,
    towardPositionArr: [],
    towardPositionArrIndex: 0,
    // 颜色索引
    bodyPositionIndex: 0,
  }),
  getters: {
    getActiveGood() {
      return this.activeGood;
    },
    getCategory() {
      return this.activeCategory;
    },
    getCategoryGoods() {
      return this.categoryGoods;
    },
    getBodyPositionByColor() {
      return this.towardPositionArr[this.bodyPositionIndex];
    },
    getTowardPositionArr() {
      return this.towardPositionArr;
    },
  },
  actions: {
    // 初始化
    init() {
      // console.log('init getCategory');
      getCategory().then((res) => {
        this.categoryGoods = res.data[0]?.children;
        this.categoryGoods.forEach((item, index) => {
          getProducts({ sid: item.id }).then((res) => {
            item.goods = res.data;
            if (index === 0) {
              this.setActiveGood(res.data[0]);
            }
          });
        });
      });
    },

    /**
     * 更换商品
     * @param good
     */
    setActiveGood(good) {
      this.activeGood = good;
      this.bodyPositionIndex = 0;
      this.setActivePosition(good.bodyPosition[this.bodyPositionIndex]);
      this.setCategory(good)
    },

    setCategory(good) {
      this.activeCategory = this.categoryGoods?.find((item) => {
        return item.goods?.find((item2) => {
          if (item2.id == good.id) {
            return true;
          }
        });
      });
    },

    /**
     * 换颜色
     */
    changeColorBodyPosition() {
      this.towardPositionArrIndex = (this.towardPositionArrIndex + 1) % this.towardPositionArr.length;
      this.towardPosition = this.towardPositionArr[this.towardPositionArrIndex];
    },


    /**
     * 换朝向
     * @param toward
     */
    changePosition() {
      this.bodyPositionIndex = (this.bodyPositionIndex + 1) % this.towardPositionArr.length;
      this.towardPosition = this.towardPositionArr[this.towardPositionArrIndex];
    },

    /**
     * 更换颜色
     * @param position
     */
    setActivePosition(position) {
      // console.log('setActivePosition', position);
      this.activePosition = position;
      // this.setToward('back', '背面');
      const towardPositionArr = [];
      if (position['positive']) {
        towardPositionArr.push(this.setToward('positive', '正面'));
      }
      if (position['back']) {
        towardPositionArr.push(this.setToward('back', '背面'));
      }
      if (position['left']) {
        towardPositionArr.push(this.setToward('left', '左侧'));
      }
      if (position['right']) {
        towardPositionArr.push(this.setToward('right', '右侧'));
      }
      this.towardPositionArr = towardPositionArr;
      // 默认选中第一个面
      this.towardPosition = this.towardPositionArr[this.towardPositionArrIndex];
    },
    setToward(toward: Toward, name: string) {
      const towardPositionValue = {
        type: toward,
        name,
        markedArea: this.activePosition[toward + 'MarkedArea'].split(','), // [100, 100, 300, 300], //
        size: this.activePosition[toward + 'Size'].split('-'),
        img: this.activePosition[toward],
      };
      return towardPositionValue;
    },
  },
});
